<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link href="/webjars/Semantic-UI/2.4.1/semantic.css" rel="stylesheet">
    <link href="/webjars/datatables/1.10.20/css/dataTables.semanticui.css" rel="stylesheet">
    <link href="/webjars/datatables-buttons/1.6.0/css/buttons.semanticui.css" rel="stylesheet">
    <link href="/css/main.css" rel="stylesheet">
    <script src="/webjars/jquery/3.3.1/jquery.min.js"></script>
    <script src="/webjars/Semantic-UI/2.4.1/semantic.js"></script>
    <script src="/webjars/datatables/1.10.20/js/jquery.dataTables.js"></script>
    <script src="/webjars/datatables/1.10.20/js/dataTables.semanticui.js"></script>
    <script src="/webjars/datatables-buttons/1.6.0/js/dataTables.buttons.js"></script>
    <script src="/webjars/datatables-buttons/1.6.0/js/buttons.semanticui.js"></script>
    <script src="/js/main.js"></script>
    <title>Комментарии</title>
</head>
<body>
    <div th:insert="~{menu :: menu}"></div>
    <div class="ui container">
        <h1 class="ui header">Комментарии</h1>
        <table id="commentsTable" class="ui table">
            <thead>
            <tr>
                <th>id</th>
                <th>Текст комментария</th>
                <th>Действия</th>
            </tr>
            </thead>
        </table>
    </div>
    <div id="editModal" class="ui modal">
        <div class="header">Редактирование комментария</div>
        <div class="content">
            <div class="ui form">
                <input id="upd-textId" type="hidden" name="id">
                <div class="field">
                    <label>Текст комментария</label>
                    <input id="upd-textInput" class="textInput" type="text" name="text" placeholder="Напишите комментарий">
                </div>
                <div class="field">
                    <label>Книга</label>
                    <select id="upd-bookSelect" class="ui fluid search dropdown bookDropdown" name="book_id">
                        <option value="">Выберите книгу</option>
                        <option th:each="book : ${books}"
                                th:value="${book.id}"
                                th:text="${book.name}">
                            Название книги
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="actions">
            <button id="btnSave" class="ui button">OK</button>
            <div class="ui cancel button">Отмена</div>
        </div>
    </div>
    <div id="addModal" class="ui modal">
        <div class="header">Добавить новый комментарий</div>
        <div class="content">
            <div class="ui form">
                <input th:value="${bookId}" type="hidden" name="book_id">
                <div class="field">
                    <label>Новый комментарий</label>
                    <input id="textInput" class="textInput" type="text" name="text" placeholder="Введите текст комментария">
                </div>
            </div>
        </div>
        <div class="actions">
            <button id="btnAdd" class="ui submit button">OK</button>
            <div class="ui cancel button">Отмена</div>
        </div>
    </div>
<script>
    $(document).ready(function () {
        var table = $("#commentsTable").DataTable({
            ajax: {
                url: "comment/"+[[${bookId}]],
                type: "GET",
                dataSrc: ""
            },
            columns: [
                {"data": "id"},
                {"data": "text"},
                {
                    "data": "",
                    "render": function (data, type, row) {
                        return  '<button class="ui button" onclick=deleteEntity("comment/'+row.id+'",$("#commentsTable"));>' +
                                    '<i class="ui close icon"></i>Удалить' +
                                '</button>' +
                                '<button class="ui button" onclick=\'showModal('+row.id+',\"'+row.text+'\",'+row.bookDto.id+');\'>' +
                                    '<i class="ui cogs icon"></i>Ред.' +
                                '</button>';
                    }
                }
            ],
            lengthChange: false
        });

        new $.fn.dataTable.Buttons(table, [
            {
                text: '<i class="plus icon"></i>Добавить',
                action: function () {
                    $("#addModal").modal('show');
                }
            }
        ]);

        table.buttons().container()
            .appendTo($('div.eight.column:eq(0)', table.table().container()));

        $("#btnAdd").on("click", function () {
            var textValue = $("#textInput").val();
            if (textValue !== "") {
                var data = {
                    "text": textValue,
                    "book_id": [[${bookId}]]
                };
                createEntity("comment/", data, $("#commentsTable"));
                $("#addModal").modal('hide');
                $("#textInput").val("");
            }
        });

        $("#btnSave").on("click", function () {
            var id = $("#upd-textId").val();
            var text = $("#upd-textInput").val();
            var bookId = $("#upd-bookSelect").val();

            if (text !== "" && bookId !== "") {
                var data = {
                    "id": id,
                    "text": text,
                    "bookDto": {"id": bookId}
                };
                updateEntity("comment/"+id, data, $("#commentsTable"));
                $("#editModal").modal('hide');
            }
        })
    });

    function showModal(id, text, book_id) {
        $("#upd-textId").val(id);
        $("#upd-textInput").val(text);
        $("#upd-bookSelect").dropdown('set selected', book_id);

        $("#editModal").modal('show');
    }
</script>
</body>
</html>